<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div_01 {
        height: 48px;
        margin-left: 30px;
        margin-right: 30px;
    }

    #div_01_right {

        height: 48px;
        float: right;

    }

    #div_01_right_top {
        left: 10px;
        position: relative;
    }

    #div_01_right_bottom {
        border-top: 1px solid lightblue;
        border-left: 1px solid lightblue;
        border-right: 1px solid lightblue;
        background-color: rgb(229, 255, 248);
        color: #999;
        padding: 10px;
        margin-top: -10px;
    }

    #div_02 {
        background-image: url('image/menuBg.jpg');
        height: 50px;
        color: white;
        margin-left: 30px;
        margin-right: 30px;
        text-align: center;
        padding: 0;
    }

    ul {
        width: 95%;
        height: 50px;
        display: table;
        table-layout: fixed;
    }

    ul li {
        display: table-cell;
        color: #fff;
        line-height: 50px;
        text-align: center;
    }

    #div_03 {
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    #banner {
        width: 100%;

    }

    #div_bottom {
        align-content: center;
        text-align: center;
        color: #999;
    }

    #div_center {
        border: 1px solid greenyellow;
        margin-left: 30px;
        margin-right: 30px;
    }
</style>

<body>

    <div id="div_01">


        <img src="image/logo.jpg">


        <div id="div_01_right">
            <div id="div_01_right_top">
                <img src="image/icon_count.png">
            </div>
            <div id="div_01_right_bottom">

                <span>尾品汇</span>&nbsp; &nbsp;
                <span>当当优品</span>&nbsp; &nbsp;
                <span>数字馆</span>&nbsp; &nbsp;
                <span>都看阅器</span>
            </div>




        </div>

    </div>

    <div id="div_02">
        <ul>
            <li>首页</li>
            <li>图书</li>
            <li>音像</li>
            <li>童装</li>
            <li>服装</li>
            <li>鞋靴</li>
            <li>运动</li>
            <li>箱包</li>
            <li>美妆</li>
            <li>珠宝</li>
            <li>家居</li>
            <li>食品</li>
            <li>酒</li>
            <li>手机</li>
            <li>数码</li>
            <li>电脑</li>
            <li>家电</li>

        </ul>
    </div>

    <div id="div_03">
        <img src="image/banner.png" id="banner">
    </div>


    <div id="div_center">

        <div style="margin-left: -12px;margin-top: 20px;">
            <img src="image/bg_bang.gif">
        </div>

        <table>
            <tr>
                <td style="width: 55%;">


                    <table>
                        <tr>
                            <td rowspan="5">
                                <div style="width: 260px;height: 260px;position:relative;">
                                    <div style="width: 260px;height: 260px;">

                                        <img src="image/book-01.jpg"
                                            style="vertical-align: middle;z-index: 1;width: 260px;height: 260px;">
                                    </div>
                                    <div style="width: 27px;height: 48px;position: absolute;top: 0;left: 20px;">
                                        <img src="image/bookNo1.gif">
                                    </div>

                                </div>

                            </td>
                            <td>

                                <font color="blue" size="5">偷影子的人</font>
                            </td>


                        </tr>
                        <tr>

                            <td>
                                作者：[法]马克 李维（Marc Levy）著
                            </td>
                        </tr>
                        <tr>

                            <td>
                                出版社：湖南文艺出版社
                            </td>
                        </tr>
                        <tr>

                            <td>
                                当当价：<font color="red" size="3">￥17.90</font>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                                我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，
                                一个时间之神没有应允的愿望。一个老是受班上同学欺负的廋弱小男孩，因为拥有一种能力而强大：他能偷别人的影子
                            </td>

                        </tr>

                    </table>



                </td>

                <td>

                    <table>
                        <tr>
                            <td rowspan="4">
                                <div style="position:relative;width: 100px;height: 100px;">
                                    <div>

                                        <img src="image/book-02.jpg" style="vertical-align: middle;">
                                    </div>
                                    <div style="position: absolute;top: 0;left: 0;">
                                        <img src="image/bookNo2.gif">
                                    </div>

                                </div>
                            </td>
                            <td>
                                <font color="blue" size="5">看见（央视指明急着、主持人柴静：十年个人成长的告白，中国变迁的备忘）</font>
                            </td>


                        </tr>
                        <tr>

                            <td>
                                作者：柴静 著
                            </td>
                        </tr>
                        <tr>

                            <td>
                                出版社：广西师范大学出版社
                            </td>
                        </tr>
                        <tr>

                            <td>
                                当当价：<font color="red" size="3">￥29.40</font>
                                <font color="green" size="3">7.4折</font>
                            </td>
                        </tr>

                    </table>
                    <table>
                        <tr>
                            <td rowspan="4">
                                <div style="position:relative;width: 100px;height: 100px;">
                                    <div>

                                        <img src="image/book-03.jpg" style="vertical-align: middle;">
                                    </div>
                                    <div style="position: absolute;top: 0;left: 0;">
                                        <img src="image/bookNo3.gif">
                                    </div>

                                </div>
                            </td>
                            <td>
                                <font color="blue" size="5">改变孩子先改变自己</font>
                            </td>


                        </tr>
                        <tr>

                            <td>
                                作者：[法]马克 李维（Marc Levy）著
                            </td>
                        </tr>
                        <tr>

                            <td>
                                出版社：作家出版社
                            </td>
                        </tr>
                        <tr>

                            <td>
                                当当价：<font color="red" size="3">￥22.20</font>
                                <font color="green" size="3">7.4折</font>
                            </td>
                        </tr>

                    </table>

                </td>
            </tr>

        </table>

    </div>

    <div id="div_bottom">

        <span>Copyright（C）当当网 2004-2017，All Right Reserved</span>
        <img src="image/validate.gif" style="vertical-align: middle;">
        <span>京ICP证041189号出版社物经营许可证 新出发京批字第直0673号</span>
        <div>
</body>

</html>